function StartScreen({ onStart, savedPlayerName, onOpenFindSeries }) {
    const [playerName, setPlayerName] = React.useState(savedPlayerName || '');
    const [error, setError] = React.useState('');

    const handleStart = () => {
        try {
            if (!playerName.trim()) {
                setError('Please enter your name');
                return;
            }
            // Save to localStorage before starting
            localStorage.setItem('colorGamePlayerName', playerName.trim());
            onStart(playerName.trim());
        } catch (error) {
            reportError(error);
        }
    };

    return (
        <div className="max-w-md mx-auto" data-name="start-screen">
            <div className="p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl animate-fade-in">
                <GameIntro />
                <GameInstructions />
                <NameInput 
                    playerName={playerName}
                    setPlayerName={setPlayerName}
                    error={error}
                    setError={setError}
                    onEnter={handleStart}
                />
                <GameControls 
                    onStart={handleStart}
                    onOpenFindSeries={onOpenFindSeries}
                />
            </div>
        </div>
    );
}
